import React from 'react'
import styles from './styles.module.css'
import {
  CheckCircleTwoTone,
  DownloadOutlined,
} from '@ant-design/icons'
import Link from '@docusaurus/Link'
import clsx from 'clsx'

interface AppProps {
  productName: JSX.Element
  version: string
  downloadLink: string
}

const DownloadLine: React.FC<AppProps> = ({
  productName,
  version,
  downloadLink,
}) => (
  <div className="row">
    <div className="col col--12">
      <div className={styles.title_name}> {productName}</div>
      <Link to={downloadLink}>
        <div
          className={clsx(
            'button button--block button--primary button--lg',
            styles.download
          )}>
          <div className={styles.download_text}>{version}</div>
          <div className={styles.download_button}>
            {'\u00A0\u00A0\u00A0\u00A0'}
            <Link to="https://polyos.iscas.ac.cn/downloads/checksums">
              <CheckCircleTwoTone twoToneColor="#52c41a" />
            </Link>
            <Link to={downloadLink}>
              <DownloadOutlined
                style={{ color: '#ffffff', marginLeft: '20px' }}
              />
            </Link>
          </div>
        </div>
      </Link>
    </div>
  </div>
)

export default DownloadLine
